<template>
  <div class="main">
    <div class="container">
      <div class="steps">
        <el-steps :active="step" class="step">
          <el-step title="步骤一" description="客户信息"/>
          <el-step title="步骤二" description="图片上传"/>
          <el-step title="步骤三" description="组织信息"/>
          <el-step title="步骤四" description="联系人信息"/>
        </el-steps>
      </div>
      <transition name="fade">
        <router-view :msg="msg" class="view" @test="testP"/>
      </transition>
      <div class="but-group">
        <el-button v-show="preview" @click.native.prevent="handlePreview">预览</el-button>
        <el-button v-show="preStep" @click.native.prevent="handlePreStep">上一步</el-button>
        <el-button v-show="nextStep" type="primary" @click.native.prevent="handleNextStep">下一步</el-button>
        <el-button v-show="publish" type="primary" @click.native.prevent="handlePublish">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddClient',
  data() {
    return {
      isRouter: false,
      preview: true,
      preStep: false,
      nextStep: true,
      publish: false,
      step: 1,
      msg: 'hello'
    }
  },
  watch: {
    '$route': function(to, from) {
      this.isRouter = true
    }
  },
  methods: {
    testP(msg) {
      this.msg = msg
    },
    handlePreview: function() {
      console.log('预览')
    },
    handlePreStep: function() {
      this.$router.go(-1)
      this.step--
      this.goStep(this.step)
    },
    handleNextStep: function(val) {
      this.$router.push('/client/add/step' + (this.step + 1))
      var _this = this
      setTimeout(function() {
        if (_this.isRouter) {
          _this.step++
          _this.goStep(_this.step)
        }
      }, 100)
    },
    handlePublish: function() {
      console.log('保存')
    },
    goStep: function(n) {
      switch (n) {
        case 1 :
          this.preview = true; this.preStep = false; this.nextStep = true; this.publish = false
          break
        case 2 :
          this.preview = false; this.preStep = true; this.nextStep = true; this.publish = false
          break
        case 3 :
          this.preview = false; this.preStep = true; this.nextStep = true; this.publish = false
          break
        case 4 :
          this.preview = false; this.preStep = true; this.nextStep = false; this.publish = true
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">

.main {
  width: 100%;
  height: 100%;
  background-color: white
}

.container{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  padding-top: 80px;
  .steps {
    width: 96%;
    margin: 0 2% 0 2%
  }
  .center-form {
    width: 100%;
    height: 100%;
    margin-top: 80px
  }
  .but-group {
    bottom: 0px;
    text-align: center
  }
}
.container .router-link{color:#fff;}
.container .but-group .el-button{margin-right: 20px}
</style>
